<template>
  <div class="orderDetails">
    <loading :state="loading"/>
    <popup :pupData="pupData" @sureFun="sureFun" @cancelFun="cancelFun" ref="popupref"/>
    <!--<div class="head">-->
    <!--<h1>小票单号:454641613</h1>-->
    <!--<div class="head-bt">-->
    <!--<p>配送员：某某某</p>-->
    <!--<p>手机号：1870000000</p>-->
    <!--</div>-->
    <!--</div>-->
    <div class="area">
      <item-comment v-for="(item, index) in goodsInfo"
                    :key="index"
                    :goodsArea="item"
                    :mem="index"
                    :memLong="goodsInfo.length"
                    ref="comm"
                    :orderId="orderId"
                    @checkState="Statecheck"
      />
    </div>
    <div class="footer">
      <button @click="handleCommit" class="btnRight">发布</button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import ItemComment from '../../components/order/itemComment';
  import OrderTextArea from '../../components/order/orderTextArea';
  import orderFooter from '../../components/order/orderFooter';
  import OrderType from '../../pages/order/OrderType';

  export default {
    name: 'order-comment',
    created() {
      this.getDetail();
    },
    data() {
      return {
        loading: false,
        stateData: false,
        pupData: {
          des: '确认',
          cancel: '取消',
          sure: '确定'
        }, // 弹窗提示文字
        status: this.$route.query.status, // 追踪订单状态
        orderId: this.$route.query.id, // 订单号
        // goodsInfo: [
        //   // todo 获取goodsInfo数据
        //   {
        //     title: '特价专区',
        //     goods: [
        //       {
        //         title: '新款花仙子草莓双层生日蛋糕新款花仙子草莓双层生日蛋糕',
        //         nid: '椰果夹心，8寸',
        //         pic: 'http://img.sx.ishangtui.com/image/77406_5b6ae00d6855a.png'
        //       },
        //       {
        //         title: '新款花仙子草莓双',
        //         nid: '椰果夹心，8寸',
        //         pic: 'http://img.sx.ishangtui.com/image/77406_5b6ae00d6855a.png'
        //       }
        //     ]
        //   },
        //   {
        //     title: '生日蛋糕',
        //     goods: [
        //       {
        //         title: '新款花仙子草莓双',
        //         nid: '椰果夹心，8寸',
        //         pic: 'http://img.sx.ishangtui.com/image/77406_5b6ae00d6855a.png'
        //       }
        //     ]
        //   }
        // ], // 产品信息
        goodsInfo: [],
        stateComment: true
      };
    },

    components: {
      OrderTextArea,
      ItemComment,
      orderFooter
    },
    computed: {
      head() {
        // 控制头部显示样式
        if (this.status === OrderType.waitPay) {
          // 待付款
          return 'waitPay';
        } else if (this.status === OrderType.waitReceipt) {
          // 待接单
          return 'pay';
        } else {
          // 其他
          return 'other';
        }
      }
    },
    methods: {
      Statecheck(state) {
        // 子组件改变校验状态true为通过 stateComment
        if (this.$Spread.stateComment) {
          // 脚丫都过了发数据吧
          this.$nextTick(() => {
            for (let i = 0; i < this.goodsInfo.length; i++) {
              this.$refs.comm[i].uploadData();
            }
          });
        }
      },
      // 弹出框取消
      cancelFun() {
        this.$refs.popupref.switchState();
      },
      // 弹出框提示
      sureFun() {
        this.$refs.popupref.switchState();
      },
      onItemCLick(index) {
        console.log(index, '1212112321312');
      },
      handleCommit() {
        // 确定评价
        this.$nextTick(() => {
          if (this.stateData === true) {
            this.$Spread.stateComment = true;
            for (let i = 0; i < this.goodsInfo.length; i++) {
              this.$refs.comm[i].upItemComment();
            }
          }
        });
        // 先上传图片
        // content：评论内容
        // img：图片，(此处是数组)
        // product：商品id
        // order：订单id
        // this.$Spread.NewUserOrderCommentUp({}).then(res => {
        //
        // }, (err) => {
        //   console.log(err);
        // });
      },
      getDetail() {
        //  获取订单详情
        this.$Spread.NewUserOrderComment({orderId: this.orderId}).then(res => {
          // console.log(res.data.data);
          this.goodsInfo = res.data.data;
          this.stateData = true;
        }, (err) => {
          console.log(err, 'resssssssssssss');
        });
      }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .icon {
    width: 6vw
    height: 6vw
    fill: third-ash
    margin-right 2vw
  }

  .rect {
    width: 96vw
    margin 10px auto
    padding 3vw 4vw
    box-sizing border-box
    background white
    border-radius(5px)
  }

  .orderDetails {
    .area {
      margin-bottom 100px
    }
    .footer {
      position fixed
      width 100vw
      height 14vw
      background white
      flex-center()
      bottom: 0
      button {
        padding: 3vw 8vw;
        box-sizing border-box
        border-radius(50px)
        font-size: vw(16)
        &.btnRight {
          background main-color
          color: white
        }
        &.btnLeft {
          background none
          border(main-color);
          color: main-color
          margin-right 10vw
        }
      }
    }
    .head-pay {
      @extend .rect
      height: 12vw
      flex-x()
      h1 {
        word-vw(16, main-color)
      }
      p {
        word-vw(14, first-ash)
      }
    }
    .head-waitPay {
      @extend .rect
      height: 12vw
      flex-x()
      h1 {
        word-vw(16, second-ash)
        span {
          word-vw(16, main-color)
        }
      }
    }
    .head {
      @extend .rect
      h1 {
        word-vw(16, main-color)
        margin-bottom 10px
      }
      .head-bt {
        flex-x(flex-start)
        p {
          word-vw(14, second-ash)
          margin-right 3vw
        }
      }
    }
    .address {
      @extend .rect
      flex-x(flex-start, flex-start)
      .add-r {
        .name {
          flex-x();
        }
        .position {
          word-vw(14, third-ash)
          margin-top 2vw
          line-height 1.5
        }
      }
    }
    .mark {
      @extend .rect
      padding 4vw 2vw
      p {
        word-vw(14, third-ash)
      }
    }
    .orderInfo {
      width: 96vw;
      margin: 0 auto;
      p {
        word-vw(14, third-ash)
        line-height 1.5
      }
    }
    .total {
      flex-x(flex-end);
      margin-top 10px
      h1 {
        word-vw(14, first-ash)
        margin-right 3vw
        span {
          word-vw(14, main-color)
        }
      }
    }
  }
</style>
